<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0067)http://xueduany.github.io/KitJs/KitJs/demo/DatePicker/n-months.html -->
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script type="text/javascript" async="" src="/src/components/iframHtml/lib/array.js"></script>
		<script src="/src/components/iframHtml/lib/kit.js"></script>
		<!--[if IE]>
		<script src="../../src/js/ieFix.js"></script>
		<![endif]-->
		<script type="text/javascript">
			var _gaq = _gaq || [];
			_gaq.push(['_setAccount', 'UA-30210234-1']);
			_gaq.push(['_trackPageview']);
			(function() {
				var ga = document.createElement('script');
				ga.type = 'text/javascript';
				ga.async = true;
				ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
				var s = document.getElementsByTagName('script')[0];
				s.parentNode.insertBefore(ga, s);
			})();
		</script>
		<script src="/src/components/iframHtml/lib/array.js"></script>
		<script src="/src/components/iframHtml/lib/date.js"></script>
		<script src="/src/components/iframHtml/lib/dom.js"></script>
		<script src="/src/components/iframHtml/lib/selector.js"></script>
		<link rel="stylesheet" href="/src/components/iframHtml/lib/css.css">
		<!--widget-->
		<script src="/src/components/iframHtml/lib/datepicker.js"></script>
		<script src="/src/components/iframHtml/lib/datepicker-n-months.js"></script>
		<link rel="stylesheet" href="/src/components/iframHtml/lib/datepicker.css">
	</head>

	<body>
		<ul>
			<li>
			日期选择:<input type="text" id="J_input" value="" style="*zoom:1;">
			</li>
		</ul>
		<script>
            function aa()
            {
                alert("123");
            }
			$kit.$(function() {
				//默认日历
				window.picker = new $kit.ui.DatePicker.NMonths();
				picker.init();
				picker.ev({
					ev: 'change',
					fn: function(e) {
						alert(picker.getValue());
					}
				})
				//输入框下拉
				$kit.ev({
					el: '#J_input',
					ev: 'focus',
					fn: function(e) {
						var d, ipt = e.target;
						d = e.target[$kit.ui.DatePicker.defaultConfig.kitWidgetName];
						if(d) {
							d.show();
						} else {
							d = new $kit.ui.DatePicker.NMonths();
							d.init();
                            d.adhere($kit.el('#J_input'));
                            
							d.show();
						}
					}
				});
				$kit.ev({
					el: document,
					ev: 'click',
					fn: function(e) {
						var input = $kit.el('#J_input');
                        d = input[$kit.ui.DatePicker.defaultConfig.kitWidgetName];
                        d.selectedDateAry
                        window.parent.document.getElementById("123").value = input.value;
						if(d && !$kit.contains(d.picker, e.target) && input != e.target) {
							d.hide();
						}
					}
				});
			})
		</script>

		<div class="datepicker dropdown-menu" style="position: absolute; top: 410px; left: 470px; display: none;">
			<div class="datepicker-days" style="display: block;">
				<table class="table-condensed">
					<thead>
						<tr>
							<th class="prev" onselectstart="return false" style="visibility: visible;"><i class="icon-arrow-left">&lt;</i></th>
							<th colspan="5" class="switch">2019年一月份</th>
							<th class="next" onselectstart="return false" style="visibility: hidden;"><i class="icon-arrow-right">&gt;</i></th>
						</tr>
						<tr>
							<th class="dow">一</th>
							<th class="dow">二</th>
							<th class="dow">三</th>
							<th class="dow">四</th>
							<th class="dow">五</th>
							<th class="dow">六</th>
							<th class="dow">七</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td></td>
							<td class="day">1</td>
							<td class="day">2</td>
							<td class="day">3</td>
							<td class="day">4</td>
							<td class="day">5</td>
							<td class="day">6</td>
						</tr>
						<tr>
							<td class="day">7</td>
							<td class="day">8</td>
							<td class="day">9</td>
							<td class="day">10</td>
							<td class="day">11</td>
							<td class="day">12</td>
							<td class="day">13</td>
						</tr>
						<tr>
							<td class="day">14</td>
							<td class="day">15</td>
							<td class="day">16</td>
							<td class="day">17</td>
							<td class="day">18</td>
							<td class="day">19</td>
							<td class="day">20</td>
						</tr>
						<tr>
							<td class="day">21</td>
							<td class="day">22</td>
							<td class="day">23</td>
							<td class="day">24</td>
							<td class="day">25</td>
							<td class="day">26</td>
							<td class="day">27</td>
						</tr>
						<tr>
							<td class="day">28</td>
							<td class="day">29</td>
							<td class="day">30</td>
							<td class="day">31</td>
							<td></td>
							<td></td>
							<td></td>
						</tr>
						<tr>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
						</tr>
					</tbody>
				</table>
				<table class="table-condensed">
					<thead>
						<tr>
							<th class="prev" onselectstart="return false" style="visibility: hidden;"><i class="icon-arrow-left">&lt;</i></th>
							<th colspan="5" class="switch">2019年二月份</th>
							<th class="next" onselectstart="return false" style="visibility: hidden;"><i class="icon-arrow-right">&gt;</i></th>
						</tr>
						<tr>
							<th class="dow">一</th>
							<th class="dow">二</th>
							<th class="dow">三</th>
							<th class="dow">四</th>
							<th class="dow">五</th>
							<th class="dow">六</th>
							<th class="dow">七</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td class="day">1</td>
							<td class="day">2</td>
							<td class="day">3</td>
						</tr>
						<tr>
							<td class="day">4</td>
							<td class="day">5</td>
							<td class="day">6</td>
							<td class="day">7</td>
							<td class="day">8</td>
							<td class="day">9</td>
							<td class="day">10</td>
						</tr>
						<tr>
							<td class="day">11</td>
							<td class="day">12</td>
							<td class="day">13</td>
							<td class="day">14</td>
							<td class="day">15</td>
							<td class="day">16</td>
							<td class="day">17</td>
						</tr>
						<tr>
							<td class="day">18</td>
							<td class="day">19</td>
							<td class="day">20</td>
							<td class="day">21</td>
							<td class="day">22</td>
							<td class="day">23</td>
							<td class="day">24</td>
						</tr>
						<tr>
							<td class="day">25</td>
							<td class="day">26</td>
							<td class="day">27</td>
							<td class="day">28</td>
							<td></td>
							<td></td>
							<td></td>
						</tr>
						<tr>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
						</tr>
					</tbody>
				</table>
				<table class="table-condensed">
					<thead>
						<tr>
							<th class="prev" onselectstart="return false" style="visibility: hidden;"><i class="icon-arrow-left">&lt;</i></th>
							<th colspan="5" class="switch">2019年三月份</th>
							<th class="next" onselectstart="return false"><i class="icon-arrow-right">&gt;</i></th>
						</tr>
						<tr>
							<th class="dow">一</th>
							<th class="dow">二</th>
							<th class="dow">三</th>
							<th class="dow">四</th>
							<th class="dow">五</th>
							<th class="dow">六</th>
							<th class="dow">七</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td class="day">1</td>
							<td class="day">2</td>
							<td class="day">3</td>
						</tr>
						<tr>
							<td class="day">4</td>
							<td class="day">5</td>
							<td class="day">6</td>
							<td class="day">7</td>
							<td class="day">8</td>
							<td class="day">9</td>
							<td class="day">10</td>
						</tr>
						<tr>
							<td class="day">11</td>
							<td class="day">12</td>
							<td class="day">13</td>
							<td class="day">14</td>
							<td class="day">15</td>
							<td class="day">16</td>
							<td class="day">17</td>
						</tr>
						<tr>
							<td class="day">18</td>
							<td class="day">19</td>
							<td class="day">20</td>
							<td class="day">21</td>
							<td class="day">22</td>
							<td class="day">23</td>
							<td class="day">24</td>
						</tr>
						<tr>
							<td class="day">25</td>
							<td class="day">26</td>
							<td class="day">27</td>
							<td class="day">28</td>
							<td class="day">29</td>
							<td class="day">30</td>
							<td class="day">31</td>
						</tr>
						<tr>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
						</tr>
					</tbody>
				</table>
			</div>
			<div class="datepicker-months" style="display: none;">
				<table class="table-condensed">
					<thead>
						<tr>
							<th class="prev" onselectstart="return false"><i class="icon-arrow-left">&lt;</i></th>
							<th colspan="5" class="switch">2019</th>
							<th class="next" onselectstart="return false"><i class="icon-arrow-right">&gt;</i></th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td colspan="7"><span class="month active">1月</span><span class="month">2月</span><span class="month">3月</span><span class="month">4月</span><span class="month">5月</span><span class="month">6月</span><span class="month">7月</span><span class="month">8月</span><span class="month">9月</span><span class="month">10月</span><span class="month">11月</span><span class="month">12月</span></td>
						</tr>
					</tbody>
				</table>
			</div>
			<div class="datepicker-years" style="display: none;">
				<table class="table-condensed">
					<thead>
						<tr>
							<th class="prev" onselectstart="return false"><i class="icon-arrow-left">&lt;</i></th>
							<th colspan="5" class="switch">2010-2019</th>
							<th class="next" onselectstart="return false" style="visibility: visible;"><i class="icon-arrow-right">&gt;</i></th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td colspan="7"><span class="year old">2009</span><span class="year">2010</span><span class="year">2011</span><span class="year">2012</span><span class="year">2013</span><span class="year">2014</span><span class="year">2015</span><span class="year">2016</span><span class="year">2017</span><span class="year">2018</span><span class="year active">2019</span><span class="year old">2020</span></td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</body>

</html>